<style lang="less" scoped>
@import "../assets/css/config.less";
.verifycode{
  outline: none;
  background-color: #fff;
  border: @border;
  width: 100%;
  border-radius: 4px;
  cursor: pointer;
  height: 100%;
}
</style>

<template>
  <button class="verifycode" @click.prevent="getCode">
    {{verifyMsg}}
  </button>
</template>

<script>
import { verify_signin } from '../api/api'
export default {
  name: 'verifyCode',
  data(){
    return {
      verifyMsg: '发送验证码',
      timer: null,
      loading: false,
      count: 60
    }
  },
  props: ['email', 'type'],
  methods: {
    getCode() {
      if(this.timer){
        return
      }
      this.verifyMsg = '60秒后可重发';
      this.timer = setInterval(() => {
        if(this.count>0){
          this.count--;
          this.verifyMsg = `${this.count}秒后可重发`
        } else {
          this.count = 60;
          this.verifyMsg = `重新发送验证码`
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000)
      verify_signin({ 
        email: this.email,
        type: this.type
       })
      .then((res) => {
        if(res.state===true){
          this.$Message.success("验证码已发送到您的邮箱")
        } else {
          this.$Message.error(res.msg)
        }
      })
      .catch((err) => {
        this.$Message.error('验证码发送失败！');
      });
    },
  }
}
</script>